import { Routes, Route, useLocation } from "react-router-dom"
import { AnimatePresence } from "framer-motion"

import Home from './components/FramerMotion/Home'
import About from './components/FramerMotion/About'
import Contact from './components/FramerMotion/Contact'
import NavBar from './components/FramerMotion/NavBar'

function App() {

  const location = useLocation()

  return (
    <>
      <NavBar></NavBar>
      <AnimatePresence mode="wait"> 
        <Routes location={location} key={location.pathname}>
          <Route index element={<Home></Home>}></Route>
          <Route path="/about" element={<About></About>}></Route>
          <Route path="/contact" element={<Contact></Contact>}></Route>
        </Routes>
      </AnimatePresence>
    </>
  )
}

export default App
